<template>
	<!-- 面包屑 -->
	<el-breadcrumb separator="/">
		<el-breadcrumb-item :to="{path:'/welcome'}">首页</el-breadcrumb-item>
		<el-breadcrumb-item>咨询公告</el-breadcrumb-item>
	</el-breadcrumb>
	<!-- 查询表单 -->
	<div class="serchForm">
		<el-form :inline="true" :model="queryForm" class="demo-form-inline">
			<el-form-item label="资讯公告名">
				<el-input v-model="queryForm.noticeName" placeholder="请输入资讯公告名" clearable @clear="query" />
			</el-form-item>


			<el-form-item label="公告内容" style="margin-left: -20px;">
          <el-input v-model="queryForm.noticeContext" placeholder="请输入公告内容" clearable @clear="query" />
			</el-form-item>


			<el-form-item>
				<el-button type="primary" @click="query">搜索</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="add" style="margin-left: -20px;">新增咨询公告</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="danger" @click="deleteBatch" style="margin-left: -20px;">批量删除</el-button>
			</el-form-item>
		</el-form>
	</div>

	<!-- 表格 -->
	<div>
		<!-- 表格组件 -->
		<el-table :data="tableData" style="width: 100%" border @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" />
			<el-table-column prop="id" label="ID" width="150" />
			<el-table-column prop="noticeName" label="公告名" />
			<el-table-column prop="noticeContext" label="公告内容" />
			<el-table-column prop="noticeTime" label="发布时间" />

			<el-table-column fixed="right" label="操作" min-width="120">
				<template #default='scope'>
					<el-button type="primary" size="small" @click="edit(scope.row)">
						编辑
					</el-button>
					<el-button type="success" size="small" @click="deleteInfo(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>


		</el-table>
		<!-- 分页组件 -->

		<el-pagination v-model:current-page="queryForm.pageNum" v-model:page-size="queryForm.pageSize"
			:page-sizes="[5, 10, 15, 20]" size="default" layout="total, sizes, prev, pager, next, jumper" :total="pageTotal"
			@size-change="handleSizeChange" @current-change="handleCurrentChange" />
	</div>

	<!-- 新增修改弹框 -->
	<div class="add-dialog">
		<el-dialog v-model="dialogFormVisible" :title=title width="500" style="width: 800px;" @close="reset">
			<el-form :model="form" label-width="90px">
				<el-form-item label="公告名" style="margin-top: 30px;">
					<el-input v-model="form.noticeName" autocomplete="off" placeholder="请输入公告名" />
				</el-form-item>
				<el-form-item label="公告内容" >
					<el-input v-model="form.noticeContext" autocomplete="off" placeholder="请输入公告内容" />
				</el-form-item>
			</el-form>
			<template #footer>
				<div class="dialog-footer" style="margin-top: 50px;">
					<el-button @click="central" size="large">取消</el-button>
					<el-button type="primary" @click="confirm" size="large">
						确认
					</el-button>
				</div>
			</template>
		</el-dialog>


	</div>

</template>

<script setup>
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus';
	import {
		getCurrentInstance,
		onMounted,
		reactive,
		ref
	} from 'vue';
	const axios = getCurrentInstance().appContext.config.globalProperties.axios;
	import { cloneDeep } from 'lodash-es';

	//查询表单数据
	const queryForm = ref({
    noticeName: '',
		noticeContext: '',
		pageNum: 1,
		pageSize: 5
	});

	const dialogFormVisible = ref(false);
	//表格数据绑定
	const tableData = ref([]);
	//总记录数
	const pageTotal = ref(0);
	//批量删除的id号
	const ids = ref([])
	//新增修改标题数据
	const title = ref('新增咨询公告')
	//新增修改表单数据模型
	const form = ref({
		id: '',
    noticeName: '',
    noticeContext: '',
	noticeTime: '' // 新增
	})
	//查询方法
	const query = () => {
		axios.get('notice/page', {
			params: queryForm.value
		}).then((resp) => {
			tableData.value = resp.data.list;
      console.log(resp.data)
			// //需要将时间戳显示为时间
			for (let i=0 ;i<resp.data.list.length;i++) {
				let time = resp.data.list[i].ptime;
				let year =new Date(time).getFullYear();
				let month =new Date(time).getMonth()+1;
				let day =new Date(time).getDay();
				tableData.value[i].ptime=`${year}年${month}月${day}日`;
			}
      pageTotal.value = resp.data.pageTotal;
		})
	}
	//新增方法
	const add = () => {
		title.value = '新增资讯公告';
		dialogFormVisible.value = true;
		// 赋值当前日期
		const now = new Date();
  		const yyyy = now.getFullYear();
 		const mm = String(now.getMonth() + 1).padStart(2, '0');
 		const dd = String(now.getDate()).padStart(2, '0');
  form.value.noticeTime = `${yyyy}-${mm}-${dd}`;
	}
	//确定保存方法
	const confirm = () => {
		console.log('点击了');
		if (!form.value.id) {
			axios.post('notice', form.value).then((resp) => {
				if (resp.code == 200) {
					ElMessage.success('保存成功');
				} else {
					ElMessage.error('保存失败')
				}
				dialogFormVisible.value = false;
				query();
			})
		} else {
			axios.put('notice', form.value).then((resp) => {
				if (resp.code == 200) {
					ElMessage.success('编辑成功');
				} else {
					ElMessage.error('编辑失败')
				}
				dialogFormVisible.value = false;
				query();
			})
		}

	}
	//取消方法
	const central = () => {
		reset();
		dialogFormVisible.value = false;
		ElMessage('已取消')
	}

	//编辑方法
	const edit = (row) => {

		title.value = '编辑资讯公告';
		dialogFormVisible.value = true;
		
		//避免绑定同一引用而出现的数据同时修改
		form.value=cloneDeep(row);
		
		// form.value = JSON.parse(JSON.stringify(row));
	}

	//删除操作
	const deleteInfo = (id) => {
		ElMessageBox.confirm(
				'确定要删除这条信息吗？',
				'提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				}
			)
			.then(() => {
				axios.delete(`notice/${id}`).then((res) => {
					if (res.code == 200) {
						ElMessage({
							type: 'success',
							message: '删除成功',
						})
					}
				}).finally(() => {
					query();
				})
			})
			.catch(() => {
				ElMessage({
					type: 'info',
					message: '取消删除',
				})
			})

	}
	//复选框选中数据
	const handleSelectionChange = (val) => {
		ids.value = val.map((item) => {
			return item.id;
		})
		console.log(ids.value);
		console.log(val);
	}
	//批量删除
	const deleteBatch = () => {
		ElMessageBox.confirm(
				'确定要删除这些信息吗？',
				'提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				}
			)
			.then(() => {
				axios.delete(`notice/batch?ids=${ids.value.join()}`).then((res) => {
					if (res.code == 200) {
						ElMessage({
							type: 'success',
							message: '删除成功',
						})
					}
				}).finally(() => {
					query();
				})
			})
			.catch(() => {
				ElMessage({
					type: 'info',
					message: '取消删除',
				})
			})
	}
	
	//重置表单数据
	const reset=()=>{
		form.value = {
			id: '',
			bulletinName: '',
			inforText: '',
		}
	}
	//页面大小
	const handleSizeChange = (val) => {
		query()
	}
	//当前页码
	const handleCurrentChange = (val) => {
		query()
	}
	onMounted(() => {
		query();
	})
</script>

<style scoped>
	.add-dialog .el-input {
		height: 50px;
	}
</style>